<template>
  <div>
    <el-dialog title="新增积分规则" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label=" " prop="name" :rules="[{ required: true, message: '请输入兑换规则名称', trigger: 'blur' }]">
          <el-input placeholder="请输入兑换规则名称" v-model="modelForm.name" auto-complete="off" :maxlength="45" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="规则名称">
                <el-button tabIndex="-1">规则名称</el-button>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item style="margin-right: 0;" label=" "  prop="integral" :rules="[{ required: true, message: '必填信息', trigger: 'blur'}]">
        <el-row>
          <el-col :span="10" style="width: 43%;"><!--:hide-required-asterisk="false"-->
              <el-input placeholder="请输入积分" v-model="modelForm.integral" auto-complete="off" :maxlength="45" size="medium"  @blur="isDouble(modelForm,'integral')" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="积分">
                    <el-button tabIndex="-1">积分</el-button>
                  </el-tooltip>
                </template>
              </el-input>
          </el-col>
          <el-col :span="11" style="width: 44.4%;" class="integral_amount">
            <!--<el-form-item class="vipInter" prop="amount" :rules="[{ required: true, message: '必填信息', trigger: 'blur' }]">-->
              <el-input placeholder="数字"  class="w-100p" v-model.number="modelForm.amount" auto-complete="off" :maxlength="5" size="medium" @blur="isDouble(modelForm,'amount')" >
                <template slot="prepend">兑换</template>
                <template slot="append">元</template>
              </el-input>
            <!--</el-form-item>-->
          </el-col>
        </el-row>
        </el-form-item>

      <!--  <el-row style="margin-left:100px" >
            <el-col :span="3" style="line-height:36px">
              <div class="el-from-item_title text-left">兑换</div>
            </el-col>
            <el-col :span="7">
              <el-form-item :hide-required-asterisk="false" style="margin-left:0px;margin-right:0;" class="vipInter"   label=" " prop="integral" :rules="[{ required: true, message: '必填信息', trigger: 'blur',type:'number' }]">
                <el-input placeholder="数字" class="w-100p" v-model.number="modelForm.integral" auto-complete="off" :maxlength="5" size="medium" @blur="isDouble(modelForm,'integral')">
                  <template slot="append">积分</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3" style="line-height:36px">
                  ==>
            </el-col>
            <el-col :span="7">
              <el-form-item style="margin-left:0px;margin-right:0;" class="vipInter" label=" " prop="amount" :rules="[{ required: true, message: '必填信息', trigger: 'blur',type:'number' }]">
                <el-input placeholder="数字"  class="w-100p" v-model.number="modelForm.amount" auto-complete="off" :maxlength="5" size="medium" @blur="isDouble(modelForm,'amount')" >
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>-->
        <el-form-item label=" " prop="startTime" :rules="[ {  required: true, message: '请选择日期', trigger: 'blur' }]">
          <el-row>
            <el-col :span="12" style="padding-left: 0;">
              <div class="el-input el-input-group el-input-group--prepend">
                <div class="el-input-group__prepend">有效期</div>
                <el-date-picker
                  v-model="modelForm.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择开始时间"
                  :picker-options="pickerOptions0"
                  @change="getEntryTime2"
                  style="width:100%;"
                >
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="el-input el-input-group el-input-group--prepend">
                <div class="el-input-group__prepend">至</div>
                <!--<el-tooltip placement="top" content="（请填写结束时间，此项为必填项！）">
                    <el-button tabIndex="-1">结束时间</el-button>
                </el-tooltip>-->
                <el-date-picker
                  v-model="modelForm.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择结束时间"
                  :picker-options="pickerOptions0"
                  @change="getEntryTime"
                  class="w-100p"
                >
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
       <!-- <el-row style="margin-left:100px">
            <el-col :span="3" style="line-height:36px">
              <div class="el-from-item_title text-left">有效日期</div>
            </el-col>
            <el-col :span="7">
              <el-form-item style="margin-left:0px;margin-right:0" class="vipInter" label=" " prop="startTime" :rules="[{ required: true, message: '请输入开始时间', trigger: 'blur' }]">
                    <el-date-picker
                      size="medium"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      v-model="modelForm.startTime"
                      type="date"
                      placeholder="开始时间" class="w-100p">
                    </el-date-picker>
              </el-form-item>

            </el-col>
            <el-col :span="3" style="line-height:36px">
                  至
            </el-col>
            <el-col :span="7">
              <el-form-item style="margin-left:0px;margin-right:0" class="vipInter" label=" " prop="endTime" :rules="[{ required: true, message: '请输入开始时间', trigger: 'blur' }]">
                    <el-date-picker
                      size="medium"
                      v-model="modelForm.endTime"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="date"  class="w-100p"
                      placeholder="结束时间">
                    </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>-->
        <el-form-item>
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">状态</div>
            <div style="border:1px solid #ccc; text-align: left">
              <el-radio-group v-model="modelForm.state">
                <el-radio :label="i.key" :key="i.key" :value="i.key" v-for="i in states" style="margin: 10px">{{i.text}}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">立即兑换</div>
            <div style="border:1px solid #ccc; text-align: left">
              <el-radio-group v-model="modelForm.immediatelyExchange">
                <el-radio :label="true" style="margin: 10px">是</el-radio>
                <el-radio :label="false" style="margin: 10px">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div>（启用立即兑换后，积分将实时转化为现金，存储到会员赠送账户中）</div>
        </el-form-item>
      </el-form>
      <div class="foot-bar-button">
        <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//注意路径
import ElCol from "element-ui/packages/col/src/col";

export default {
  components: {ElCol},
  props: ["isShow", "id"], //参数
  data() {
    return {
      modelForm: {},
      showDialog: false,
      activityId: "",
      isSave: true,
      downCategeryId: [],
      isUpdate: false,
      treeData: [],
      states:[],
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
        }
      }
    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
      if (newValue) {
        if (this.id != "") {
          this.activityId = this.id;
          this.isSave = false;
          this.isUpdate = true;

          this.$axios
            .get("members/integralRules/" + this.activityId + "/update")
            .then(data => {
              this.modelForm = data.content.integralRule;
              this.states=data.content.states;
            });
        } else {
          this.isSave = true;
          this.isUpdate = false;
          this.$axios.get("members/integralRules/create").then(data => {
            this.modelForm = data.content.integralRule;
           this.states=data.content.states;
            console.log(this.treeData);
          });
        }
      }
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    getEntryTime2(val) {
      console.log(val)
      if(val){
        this.modelForm.startTime = val+" 00:00:00";
      }
//            this.createAt = val;
    },
    getEntryTime(val) {
      console.log(val)
      if(val){
        this.modelForm.endTime = val+" 23:59:59";
      }
//            this.createAt = val;
    },
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          newList[i].value = newList[i].id + "";
          newList[i].children = null;
        }
      }
    },
    goBack() {
      this.router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isSave) {
            this.$axios
              .post("members/integralRules/create", this.modelForm)
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          } else {
            this.modelForm._method = "PUT";
            this.$axios
              .put(
                "members/integralRules/" + this.activityId + "/update",
                this.modelForm
              )
              .then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: "success"
                  });
                  this.$emit("addSuccess");
                } else {
                  this.$message.error(data.message);
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("close");
      this.showDialog = false;
    },
    handleClose(done) {
      this.$emit("close");
      done();
    },
    isNum(item, key) {
      var r = /^\+?[1-9][0-9]*$/;
      if (!r.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    isDouble(item, key) {
      console.log(item[key]);
      this.$forceUpdate();
      var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!isNum.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    }
  }
};
</script>
<style scoped>
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
.el-input--suffix .el-input__inner{
  margin-right: 0px;
}
</style>
